<template>
  <div>
    <div
      :id="uuid"
      ref="chart"
      class="gauge-progress-box"
      :style="{
        width: '100%',
      }"
    ></div>
    <div class="text-center gauge-progress-num">{{ progressNum }}%</div>
    <div class="gauge-progress-name">{{ name }}</div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import cloneDeep from 'lodash/cloneDeep'
  import * as echarts from 'echarts'
  export default defineComponent({
    name: 'GaugeProgress',
    components: {},
    mixins: [],
    props: {
      uuid: {
        type: String,
        default: '',
      },
      name: {
        type: String,
        default: '',
      },
      progressNum: {
        required: true,
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        myChart: null,
      }
    },
    watch: {
      progressNum: {
        handler() {
          this.initChart(this.progressNum)
        },
      },
    },
    created() {},
    mounted() {
      this.$nextTick(() => {
        this.initChart(this.progressNum)
      })
    },
    methods: {
      initChart(progressNum) {
        if (!this.myChart) {
          let chartDom = this.$refs.chart
          this.myChart = echarts.init(chartDom)
        }
        let color = '#33cc66'
        if (progressNum > 50) {
          color = '#FEA728'
        }
        if (progressNum > 80) {
          color = '#ff3333'
        }

        let option = {
          series: [
            {
              type: 'gauge',
              radius: '100%',
              startAngle: 180,
              endAngle: 0,
              min: 0,
              max: 100,
              splitNumber: 4,
              itemStyle: {
                color: color,
                shadowColor: 'rgba(0,138,255,0.45)',
                shadowBlur: 10,
                shadowOffsetX: 2,
                shadowOffsetY: 2,
              },
              progress: {
                show: true,
                roundCap: true,
                width: 6,
              },
              pointer: {
                icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                length: '75%',
                width: 6,
                offsetCenter: [0, '5%'],
              },
              axisLine: {
                roundCap: true,
                lineStyle: {
                  width: 6,
                },
              },
              axisTick: {
                splitNumber: 2,
                lineStyle: {
                  width: 1,
                  color: '#999',
                },
              },
              splitLine: {
                length: 1,
                lineStyle: {
                  width: 1,
                  color: '#999',
                },
              },
              axisLabel: {
                distance: 1,
                color: '#999',
                fontSize: 0,
              },
              title: {
                show: false,
              },
              detail: {
                fontSize: 0,
              },
              // detail: {
              //   width: '60%',
              //   lineHeight: 10,
              //   height: 10,
              //   offsetCenter: [0, '45%'],
              //   valueAnimation: true,
              //   formatter: function (value) {
              //     return '{value|' + value.toFixed(0) + '}{unit|%}'
              //   },
              //   rich: {
              //     value: {
              //       fontSize: 16,
              //       color: '#777',
              //     },
              //     unit: {
              //       fontSize: 16,
              //       color: '#777',
              //     },
              //   },
              // },
              data: [
                {
                  value: progressNum,
                },
              ],
            },
          ],
        }

        option && this.myChart.setOption(cloneDeep(option), true)
      },
    },
  })
</script>
<style lang="scss">
  .gauge-progress-box {
    height: 100px;
  }
  .gauge-progress-num {
    position: relative;
    top: -30px;
    font-size: 18px;
    font-weight: 700;
  }
  .gauge-progress-name {
    font-size: 12px;
    text-align: center;
    position: relative;
    top: -20px;
  }
</style>
